body,p,h1,ul{margin: 0;padding: 0;}
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
ul{list-style-type:none;
}
li{
    float: left;
    padding: 0 1rem;
    height: 3rem;
    line-height: 3rem;
    background: #ccc;
}


/*=================================圆形进度条========================================*/
.yuanload{
    margin: 5rem auto;
    width: 8rem;
    height: 8rem;
    /*border: 1rem solid #1e88d2;*/
    /*border-radius: 50%;*/     /*设置圆形边框*/

    /*设置动画属性参数*/
    -webkit-animation: roll 5s infinite linear;
    -o-animation: roll 5s infinite linear;
    animation: roll 5s infinite linear;

}
.yuanload:before{
    content: "";
    display: block;
    width: 8rem;
    height: 4rem;
    padding: 1rem;  /*设置边宽*/
    padding-bottom: 0;  /*设置下边框为空*/
    box-sizing: border-box;
    /*画半圆*/
    border-top-left-radius: 4rem;
    border-top-right-radius: 4rem;
    /*设置两个渐变用来做出一个边框的效果*/
    background: linear-gradient(90deg,#fff,#fff),linear-gradient(90deg,#74baff,#077df8);
    background: -moz-linear-gradient(90deg,#fff,#fff),-moz-linear-gradient(90deg,#74baff,#077df8);
    background: -webkit-linear-gradient(90deg,#fff,#fff),-webkit-linear-gradient(90deg,#74baff,#077df8);
    /*设置填充区域，content-box填充到内部留白覆盖padding-box，显得中间是空的，padding-box填充到边框*/
    background-clip: content-box, padding-box;
    -webkit-background-clip: content-box,padding-box;
}
.yuanload:after {
    content: "";
    display: block;
    width: 8rem;
    height: 4rem;
    padding: 1rem;  /*设置边宽*/
    padding-top: 0;  /*设置下边框为空*/
    box-sizing: border-box;
    /*画半圆*/
    border-bottom-left-radius: 4rem;
    border-bottom-right-radius: 4rem;
    /*设置两个渐变用来做出一个边框的效果*/
    background: linear-gradient(90deg,#fff,#fff),linear-gradient(90deg,#fff,#74baff);
    background: -moz-linear-gradient(90deg,#fff,#fff),-moz-linear-gradient(90deg,#fff,#74baff);
    background: -webkit-linear-gradient(90deg,#fff,#fff),-webkit-linear-gradient(90deg,#fff,#74baff);
    background-clip: content-box, padding-box;
}

/*运行动画*/
@-webkit-keyframes roll {
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes roll{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@-o-keyframes roll{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
/*CSS3做圆形滚动进度条不好的地方是，由于颜色只能是线性渐变，所以做的两个半圆的交界处会存在一条明显的分界线，影响视觉效果*/
/*===========================================================================================================*/


/*=======================================条纹进度条================================================*/
.tiaowenjindutiao{
    margin: 5rem auto;
    width: 50rem;
    height:3rem;
    border-radius: 1.5rem;
    /*加边框在rem模式下对导致像素单位差异，会有缝隙，不建议加边框*/
    /*border: .1rem solid #ccc;*/
    background: #ccc;
    overflow: hidden;
}

.tiaowenjindutiao:before{
    content: "";
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 50rem;
    height: 3rem;
    /*border-radius: 1.5rem;*/
    /*border: .1rem solid #ccc;*/
    /*条纹倾斜45度。0代表跟之前的百分比最大的一样*/
    background: linear-gradient(45deg, #aac8f3 25%, #1e88d2 0,
    #1e88d2 50%, #aac8f3 0,
    #aac8f3 75%, #1e88d2 0
    );
    background: -webkit-linear-gradient(45deg, #aac8f3 25%, #1e88d2 0,
    #1e88d2 50%, #aac8f3 0,
    #aac8f3 75%, #1e88d2 0
    );
    /*设置斜纹的宽度*/
    background-size: 5rem 5rem;
    -webkit-animation: twjdload 10s infinite ease-in;
    -moz-animation: twjdload 10s infinite ease-in;
    -o-animation: twjdload 10s infinite ease-in;
    /*animation: twjdload 10s infinite ease-in;*/
}

@-webkit-keyframes twjdload {
    0%{width: 0%;}
    100%{width: 100%;}
}
@-moz-keyframes twjdload {
    0%{width: 0%;}
    100%{width: 100%;}
}
@-o-keyframes twjdload {
    0%{width: 0%;}
    100%{width: 100%;}
}
/*========================================================================================================*/

/*==============================================显示隐藏下拉框并旋转三角=================================================*/
.hidden-list{
    position: relative;
    margin: 5rem auto;
    width: 30rem;
}

.hidden-list a{
    text-decoration: none;
    color: #000;
    font-size: 1.2rem;
}
.hidden-list a:hover{
    color: red;
}
/*元素的hover, focus 状态改变其他元素的样式需要使用css选择器>子元素+同级紧跟的第一个元素~同级并且排在a元素后的所有指定元素*/
.list:hover>.sanjiao{
    border-top: .3rem solid blue;
    -webkit-transform: rotate(180deg);
}
.list:hover>.hidden-connent{
    /*这里为什么不用~选择器呢，因为不想全部后代都被影响*/
    display: block;
}
.sanjiao{
    position: absolute;
    top: 1.3rem;
    width: 0;
    height: 0;
    margin-left: .3rem;
    border-top: .3rem solid red;
    border-left: .3rem solid transparent;
    border-right: .3rem solid transparent;
    -webkit-transform: rotate(0deg);
    -webkit-transition: 1s linear;
}

.hidden-connent{
    display: none;
    position: absolute;
    left: 0;
    padding: .5rem 1rem;
    width: 7rem;
    /*line-height: 2.5rem;*/
    background: yellow;
}
/*==============================================================================================================*/
/*=============================================右侧悬浮动作条========================================================*/

.xuanfu-layout{
    position: fixed;
    top: 0;
    right: 0;
    width: 1rem;
    height: 100%;
    padding: 1rem;
    display: flex;
    align-items: center;
    background: yellow;
}
/*==============================================================================================================*/
.aaa{
    width: 3rem;
    height:100rem;
    background: #ccc;
}